<template>
  <el-select
    ref="elSelect"
    class="pub-select-tree  w100"
    v-model="selectName"
    :filterable="filterable"
    :filter-method="dataFilter"
    :popper-append-to-body="appendToBody"
    @clear="clearAll"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <el-option
      :value="selectName"
      :style="{ 'max-height': appendToBody ? 'unset' : '274px' }"
    >
      <el-tree
        :data="options"
        :props="defaultProps"
        ref="treeNode"
        :node-key="defaultProps.id"
        :accordion="true"
        :highlight-current="true"
        :filter-node-method="filterNode"
        :expand-on-click-node="expandOnClickNode"
        :check-on-click-node="true"
        @node-click="handleNodeChange"
        v-bind="$attrs"
        v-on="$listeners"
      >
      </el-tree>
    </el-option>
  </el-select>
</template>

<script>
import { getOrgData } from "@/api"
export default {
  name: "OrgSelect",
  model: {
    props: "value",
    event: "change"
  },
  props: {
    // 配置选项
    defaultProps: {
      type: Object,
      default: () => ({
        // 属性值为后端返回的对应的字段名
        id: "id",
        label: "label",
        children: "children"
      })
    },
    // 是否将组件添加到body上面(组件在弹窗或者表格里面时可设为true)
    appendToBody: {
      type: Boolean,
      default: true
    },
    // 是否可搜索
    filterable: {
      type: Boolean,
      default: true // 不可以搜索
    },
    // 是否在点击节点的时候展开或者收缩节点
    expandOnClickNode: {
      type: Boolean,
      default: false
    },
    // 双向绑定值
    value: {
      type: String,
      default: ""
    },
    // 单位编码
    mgtOrgCode: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      options: [],
      selectName: "", // 绑定el-option的值
      treeLoading: false // 加载loading~
    }
  },
  watch: {
    value: {
      handler(val) {
        this.repaintNode(val)
      }
    },
    mgtOrgCode: {
      immediate: true,
      handler(val) {
        this.getData(val)
      }
    }
  },

  methods: {
    // 获取树数据
    getData() {
      getOrgData().then(res => {
        if (res.code === 200 && res.data.length) {
          this.options = res.data
          this.repaintNode(this.value)
        }
      })
    },
    // 输入框关键字
    dataFilter(val) {
      this.$refs.treeNode.filter(val)
    },
    /**
     * @description: tree搜索过滤
     * @param {*} value 搜索的关键字
     * @param {*} data  筛选到的节点
     * @return {*}
     */
    filterNode(value, data) {
      if (!value) {
        return true
      }
      return (
        data[this.defaultProps.label]
          .toLowerCase()
          .indexOf(value.toLowerCase()) !== -1
      )
    },
    /**
     * @description: 勾选树形选项
     * @param {*} data 该节点所对应的对象
     */
    handleNodeChange(node) {
      this.selectName = node[this.defaultProps.label]
      this.$emit("change", node[this.defaultProps.id])
      this.$emit("on-select", node)
      this.$refs.elSelect.blur()
    },
    // 文本框清空
    clearAll() {
      let obj = {}
      Object.keys(this.defaultProps).forEach(item => {
        obj[item] = ""
      })
      this.selectName = ""
      this.$emit("change", this.selectName)
      this.$emit("on-select", obj)
    },
    // 回显
    repaintNode(val) {
      this.$nextTick(() => {
        if (this.$refs.treeNode) {
          // 设置和获取选中的节点
          this.$refs.treeNode.setCurrentKey(val)
          let curNode = this.$refs.treeNode.getCurrentNode()
          // 下拉框赋值及回显值
          this.selectName =
            val?.length && curNode ? curNode[this.defaultProps.label] : ""
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
  font-size: 14px;
}
.el-select-dropdown__item.selected,
.el-tree-node__label {
  font-weight: normal;
}
::v-deep .el-tree {
  .is-current .el-tree-node__label {
    color: $--color-primary;
    font-weight: 700;
  }
  .el-tree-node__content {
    height: auto;
  }
  .is-current .el-tree-node__children .el-tree-node__label {
    color: #333;
    font-weight: normal;
  }
}
::v-deep {
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background: #f5f7fa;
  }
}
</style>

<style lang="scss">
.pub-select-tree {
  .el-scrollbar__wrap {
    margin: 0px !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .el-select .el-input.is-focus .el-input__inner {
    border-color: $--color-primary !important;
  }

  .el-tree .el-tree-node__content {
    height: auto;
    padding-top: 2px;
    padding-bottom: 2px;
  }
}
</style>
